<template>
  <div class="box clearfix">
    <div class="location">
      <router-link to="/index">{{$t('common.nav.home')}}</router-link> >
      <router-link :to="con.toLink">{{con.curListName}}</router-link> >
      {{$t('news.detail')}}
    </div>
    <div class="content">
      <!-- 新闻标题 -->
      <div class="news-tit tc font22">{{con.informationTitle || con.activityTitle}}
        <!-- 0-待报名，1-报名中，2-已截止 -->
        <span class="red1">
          {{con.applyStatusTxt}}  
        </span>
        
      </div> 
      <div class="time tc h88">{{$t('news.releaseTime')}}：{{con.updateTime || con.createTime}}</div>
      <div class="con" v-html="con.content"></div>
    </div>
    <div class="baom-btn bg1 font16 flex-ct cur" @click="pups()" v-if="type==1">我要报名</div>

    <div class="pup" id="baom_pup" v-if="type == 1 && pup">
      <div class="pup-box clearfix">
        <h3 class="font14">填写信息</h3>
        <span class="close" @click="pups()">关闭</span>
        <el-form label-width="100px" class="demo-ruleForm">
          <div class="formBox clearf">
              <el-form-item :label="item.infoName" v-for="(item, index) in con.requirementList" :key="index">
                <el-input v-model="item.requirementApply" :placeholder="item.statement" @input="change($event)" maxlength="30"></el-input>
              </el-form-item>
          </div>
          <!-- 注：每周最多可提交一次 -->
          <el-form-item class="submit">
            <el-button type="primary" @click="submitForm(con.requirementList)">{{$t('common.detail.submit')}}</el-button>
          </el-form-item>
        </el-form>
        
      </div>
    </div>
  </div>
</template>
<script>
import {ajax,showToast,isLoginM} from '@/utils/js.js'
import {activityApplyNew} from '@/services/api.js'
let log = console.log
export default {
  props:{
    con:{
      type:Object,
      default:()=>{return {}}
    },
  },
  data(){
    return {
      pup:false, // 报名弹窗
      baom:0,
      type:0,
      ruleForm: {
        name: '',
        phone: '',
        bglongEnterprise: '',
      },
    } 
  },
  computed:{
    conNew(){
      return {...this.con}
    },
    requirementApplyList(){
      return [...this.con.requirementApplyList]
    },
  },
  watch:{
    
  },
  mounted(){
    this.type = this.$route.query.type
  },
  // ******************* methods 开始 ****************** //
  methods:{
    change(e){
      this.$forceUpdate()
    },
    pups(){
      isLoginM(this,()=>{
        this.pup = !this.pup
        this.changeList(this.pup)
      })
    },
    submitForm(){
      let e = this.con.requirementList;
      console.log('eee',e)
      isLoginM(this,()=>{
        let requirementApplyList = []
          for(let i = 0; i<e.length; i++){
            let newJson = {requirementId:e[i].id,value:e[i].requirementApply}
            requirementApplyList = requirementApplyList.concat(newJson)
          }
          let data = {
            activityId:this.$route.query.id,
            requirementApplyList: requirementApplyList
          }
          
          ajax(this,activityApplyNew,data,res=>{
            console.log(res)
            showToast(this,res.msg,1)
            this.pup = false
            this.changeList(false)
          },err=>{
            if(err.code == 700){
              this.pup = false
            }
            this.changeList(false)
          })
      })
      
    },
    changeList(pup){
      if(pup){
        let requirementApplyList = this.con.requirementList
        for(let i = 0; i<requirementApplyList.length;i++){
          requirementApplyList[i].requirementApply = ''
        }
        this.con.requirementApplyList = {...requirementApplyList}
        console.log('requirementApplyList',requirementApplyList)
      }
    },
  }
  // ******************** methods结束 ***************** //
}
</script>

<style lang="scss">
  .index-news-detail{
    .formBox{max-height:432px;overflow-y: auto;padding-right:10px;margin-bottom:15px;}
    .formBox .el-form-item:last-child{margin-bottom: 0;}
    .formBox::-webkit-scrollbar
    {
      width: 5px;
      height: 5px;
      background-color: #F5F5F5;
    }
    
    /*定义滚动条轨道 内阴影+圆角*/
    .formBox::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
    }
    
    /*定义滑块 内阴影+圆角*/
    .formBox::-webkit-scrollbar-thumb
    {
      border-radius: 10px;
      // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
      background-color: #999;
    }


    .content{
      padding:40px 120px;
      background-color: #fff;
      .time{
        padding: 20px 0;
      }
      .con{line-height: 1.8;color: #666;}
    }
    .baom-btn{
      width:133px;
      height:42px;
      background:rgba(15,84,188,1);
      opacity:1;
      border-radius:2px;
      margin: 30px auto 0;
    }
    
  }
  #baom_pup{
    position: fixed; width: 100%; height: 100%;top: 0;left: 0;display:flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.5);
    h3{margin-bottom:15px;}
    .pup-box{
      position: relative;
      background-color: #fff;
      padding:15px;
      width:470px;
    }
    .submit .el-form-item__content{
      float: right;
    }
    .close{background-color: #f5f5f5;padding:5px;position: absolute;right:0;top:0;cursor: pointer;}
    .el-form-item__label{display: flex;align-items:center;justify-content: flex-end;line-height:1.2;height:32px;font-size:12px;}
  }
</style>